<template>
  <div>
    <top></top>
    <mall-header @onSearch="onSearch"></mall-header>
    <infoPopover></infoPopover>
    <div class="goodsContent">
      <div class="category-header">
        <svg-icon style="margin-right: 18px;" icon-class="type" size="18"></svg-icon>
        商品分类
        <a-menu class="menubox" mode="inline" v-model="selectedKeys" :openKeys="defaultOpenKeys">
          <template v-for="item in zonesTree">
            <a-menu-item v-if="item.childList.length == 0" :key="item.id" @click="checkMenu(item)"> {{ item.name }}
            </a-menu-item>
            <template v-else>
              <a-sub-menu :key="item.id" @titleClick="titleClick">
                <div slot="title" :style="{ color: selectedSubKeys == item.id ? '#1890ff' : '' }"
                  @click.stop="checkMenu(item, 'sub');">{{ item.name }}</div>
                <a-menu-item :key="i.id" v-for="i in item.childList" @click="checkMenu(i)"> {{ i.name }} </a-menu-item>
              </a-sub-menu>
            </template>
          </template>
        </a-menu>
      </div>
      <div style="width: 960px;min-height: 900px;">
        <div style="display: flex;align-items: baseline;">
          <div class="filter-wrapper">
            <filter-item :default-params="supplierParams" display-key="fullName" value-key="id" :data="treeData"
              title="商品分类" @ok="handleFilter($event, 'supplierParams')"></filter-item>
            <filter-item :default-params="deliveryParams" :data="dataDictLists['DELIVERY_FORM']" title="交付形态"
              @ok="handleFilter($event, 'deliveryParams')"></filter-item>
            <filter-item :default-params="industryParams" :data="displayApplicationIndustry" title="应用行业"
              @ok="handleFilter($event, 'industryParams')"></filter-item>
            <filter-item :default-params="sceneParams" :data="dataDictLists['APPLICATION_SCENARIO']" title="应用场景"
              @ok="handleFilter($event, 'sceneParams')"></filter-item>
          </div>
          <!-- <div class="moreAll" @click="isAll = !isAll" :class="{ 'up': !isAll, 'down': isAll }">{{ isAll ? '更多' : '收起' }}<a-icon type="down" /></div> -->
        </div>
        <div class="sort-wrapper">
          <div class="sort-left"> 排序方式：</div>
          <div class="sort-right" v-for="item in sortList" @click="changeSort(item.value)" :key="item.value"
            :class="{ 'active': params.sortType === item.value }"> {{ item.name }} </div>
        </div>
        <div class="goods-wrapper">
          <a-empty v-if="goodsList.length === 0" style="width: 100%;margin: 20px 0;"></a-empty>
          <template v-else>
            <div class="goods-item" v-for="item in goodsList" :key="item.goodsId">
              <div>
                <div class="goods-item-content">
                  <img :src="item.thumbnail" alt="" />
                  <div class="goods-item-content-right">
                    <div class="issjrz" v-if="item.authOrganFullName == '深圳数据交易所' && item.isShowFlag">
                      <a-tooltip :title="'经' + item.authOrganFullName + '合规评估'">
                        <img src="../../assets/z.png" />
                      </a-tooltip>
                    </div>
                    <div class="goods-item-name" :style="{ color: item.isPublic || '#aaa' }"
                      @click="toDetail(item.goodsId, item.authOrganFullName)"> {{ item.goodsName }} </div>
                    <div style="display: flex;margin: 6px 0">
                      <a-tag color="orange" v-if="item.chargeType === 2"> 免费 </a-tag>
                      <a-tag color="orange" v-else-if="item.freeNums > 0 && item.freeDimension == 1"> 免费{{ item.freeNums
                      }}天
                      </a-tag>
                      <a-tag color="orange" v-else-if="item.freeNums > 0 && item.freeDimension == 2"> 免费{{ item.freeNums
                      }}次
                      </a-tag>
                      <a-tag color="blue" v-if="item.purchasePermission === 2"> 企业 </a-tag>
                    </div>
                    <div class="goods-item-supplier" v-if="item.supplierName">
                      {{ item.supplierName }}
                    </div>

                  </div>
                </div>
                <div class="goods-item-content-bottom">
                  <div class="itemprice" :class="{ itemflex: item.chargeType == 3 }" v-if="item.activityDesc">
                    <span style="line-height: 20px;">{{ item.activityDesc }}</span>
                    <div class="through">
                      {{ item.chargeType == 3 ? '面议' : ('¥' + (item.chargeType == 1 ? item.price : 0)) }}
                      {{ (item.chargeType === 1 ? item.unit : '') }}
                    </div>
                  </div>
                  <div class="goods-item-price" v-else>
                    <div style="line-height: 20px;"> {{ item.chargeType == 3 ? '面议' : ('¥' + (item.chargeType == 1 ?
                      item.price : 0)) }}</div>
                    <span class="goods-item-unit">{{ item.chargeType === 1 ? item.unit : '' }}</span>
                  </div>
                  <rate-star :rate="item.goodsRate" show-bg></rate-star>
                </div>
                <div class="goods-item-desc more-t"> {{ item.goodsDesc }} </div>
              </div>
              <div class="goods-item-bottom">
                <div class="goods-item-type">
                  <svg-icon icon-class="data_type" size="14" style="margin-right: 3px;"></svg-icon>
                  应用行业：
                  <span class="goods-item-type-content">{{ item.applicationIndustry }}</span>
                </div>
                <div class="goods-item-type">
                  <svg-icon icon-class="data_scene" size="14" style="margin-right: 3px;"></svg-icon>
                  应用场景：
                  <span class="goods-item-type-content">{{ item.applicationScenario }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="pagination">
          <paging :total="paging.total" :current="paging.page" :show-size-changer="false" :defaultPageSize="paging.limit"
            @pageChange="handlePageChange" ref="paging" />
        </div>
      </div>
    </div>
    <mall-footer></mall-footer>
  </div>
</template>

<script>
import Top from '@/components/base/Top'
import MallHeader from '@/components/base/MallHeader'
import Type from '@/components/Type'
import Paging from '@/components/base/Paging'
import MallFooter from '@/components/base/MallFooter'
import { dictService } from '@/api/common'
import { pageMixin } from '@/mixins'
import { searchGoodsPage } from '@/api/goods'
import ChooseType from '@/components/ChooseType'
import RateStar from '@/components/RateStar'
import FilterItem from '../zones/components/FilterItem'
import infoPopover from './components/infoPopover'
import { queryGoodsType } from '@/api/goods/type'
import { getSpecialAreaTreeList } from '@/api/portal'
import { getShop } from '@/api/shop'

export default {
  name: 'zoneDetail',
  mixins: [pageMixin],
  components: {
    infoPopover,
    FilterItem,
    RateStar,
    ChooseType,
    Top,
    MallHeader,
    Type,
    Paging,
    MallFooter
  },
  data() {
    return {
      isAll: true,
      isShowNameNote: 'Y',
      treeData: [],
      zonesTree: [],
      id: '',
      selectedKeys: [],
      selectedSubKeys: '',
      defaultOpenKeys: [],
      dataDictMap: {
        DELIVERY_FORM: {},
        GOODS_CHARGE_TYPE: {}
      },
      carouselList: [],
      dataDictLists: [],
      params: {
        applicationIndustry: '',
        applicationScenario: '',
        deliveryForm: '',
        goodsIdList: [],
        goodsName: '',
        goodsTypeId: '',
        goodsTypeIdList: [],
        isHot: false,
        order: '',
        orderBy: '',
        payModel: '',
        sortType: 10,
        status: '',
        supplierId: '',
        supplierIdList: [],
        supplierName: '',
      },
      defaultTypeId: '',
      sortList: [
        { name: '综合排序', value: 0 },
        { name: '最新发布', value: 10 },
        { name: '最优评价', value: 20 },
        { name: '最多使用', value: 30 },
      ],
      goodsList: [],
      supplierParams: [],
      sceneParams: [],
      industryParams: [],
      deliveryParams: [],
      supplier: {
        name: '',
        contactList: [
          { legalContact: 1, contactPhone: 1, contactEmail: 1, contactTitle: 1, registerAddr: 1 }, {}, {}
        ],
        rateList: [
          { name: '服务', rate: 0, icon: 'service' },
          { name: '质量', rate: 0, icon: 'quality' },
          { name: '价格', rate: 0, icon: 'price' },
          { name: '体验', rate: 0, icon: 'delivery' }
        ]
      },
    }
  },
  computed: {
    displayApplicationIndustry() {
      let list = this.dataDictLists['APPLICATION_INDUSTRY'];
      return list ? list.sort((a, b) => a.name.length - b.name.length) : [];
    }
  },
  created() {
    dictService(this, ['DELIVERY_FORM', 'APPLICATION_INDUSTRY', 'APPLICATION_SCENARIO'])
    let { type, title, deliveryForm, supplier, hot, supid } = this.$route.query;
    this.defaultTypeId = type;
    this.params.goodsTypeId = type;
    this.params.goodsName = title;
    this.params.isHot = hot;
    this.paging.limit = 10;
    this.supid = supid;
    if(deliveryForm)this.deliveryParams.push(deliveryForm);
    if(supplier)this.supplierParams.push(supplier);

    this.loadData()
    this.loadTypeList()
    this.loadZones()
  },
  methods: {
    async getShop(supplierId){
      let res = await getShop({supplierId})
      let { shopContact } = res.data
      shopContact = shopContact.filter(v=>v.isShow)
      this.supplierData.contactList = shopContact
    },
    async loadData() {
      const params = {
        ...this.params,
        goodsTypeIdList: this.supplierParams,
        applicationScenario: this.sceneParams.join(','),
        applicationIndustry: this.industryParams.join(','),
        deliveryForm: this.deliveryParams.join(','),
        page: this.paging.page,
        limit: this.paging.limit,
        specialAreaIds: this.id
      }
      let res = await searchGoodsPage(params)
      let { records, total } = res.data || {}
      this.goodsList = records || []
      this.paging.total = +(total || 0);
    },
    async loadZones() {
      const params = {
        id: this.id,
        startTime: new Date().getTime(),
        endTime: new Date().getTime(),
        status: '1',
        sortMode: 0
      }
      let res = await getSpecialAreaTreeList(params)
      this.zonesTree = res.data || []
      let item = this.zonesTree.find(v => v.id == this.id) || {}
      let key = (item.childList||[]).length > 0 ? 'sub' : ''
      this.checkMenu(item, key);
      if (key == 'sub') this.defaultOpenKeys = [item.id]
    },
    checkMenu({ id, cycleImgs, isShowNameNote }, key) {
      this.isShowNameNote = isShowNameNote
      this.carouselList = cycleImgs;
      if (key == 'sub') {
        this.selectedSubKeys = id;
        this.selectedKeys = []
        // this.defaultOpenKeys = [id]
      }
      else this.selectedSubKeys = ''
      this.id = id
      this.loadData()
    },
    bannerOpen(item) {
      if (item.openType && item.openUrl) {
        if (item.openType === '1') {
          location.href = item.openUrl
        } else {
          window.open(item.openUrl, '_blank')
        }
      }
    },
    titleClick(e) {
      this.defaultOpenKeys = this.defaultOpenKeys[0] == e.key ? [] : [e.key]
    },
    async loadTypeList() {
      let res = await queryGoodsType();
      let { code, data } = res;
      if(code == 0)this.treeData = data.filter(i => i.level === 2)
    },
    onSearch(e) {
      this.params.goodsName = e || ''
      this.loadData()
    },
    handlePageChange(page, pageSize) {
      this.paging.page = page
      this.paging.limit = pageSize
      this.loadData()
    },
    toDetail(id, authorganFulIName) {
      this.$router.push({
        path: '/goodsDetail',
        query: { id, authorganFulIName }
      })
    },
    /**
     * 商品类型
     * @param e
     */
    typeChange(e) {
      let { id, pid } = e
      let gid = pid || (id == 'allall' ? '' : id)
      this.defaultTypeId = id
      this.params.goodsTypeId = pid || gid
      this.supplierParams = []
      this.sceneParams = []
      this.industryParams = []
      this.deliveryParams = []
      this.loadData()
    },
    /**
     * 排序
     * @param code
     */
    changeSort(code) {
      this.params.sortType = code
      this.loadData()
    },
    /**
     * 查询条件
     * @param e
     * @param key
     */
    handleFilter(e, key) {
      this.$data[key] = e
      this.loadData()
    }
  }
}
</script>

<style scoped lang="scss">
$width: 1200px;
$mainColor: #0078FE;

>>>.ant-tabs-bar {
  margin: 8px 0;
}

.moreAll {
  width: 80px;
  cursor: pointer;
  margin: 10px auto;
  text-align: center;
  font-size: 13px;

  &.down {
    i {
      margin-left: 4px;
      rotate: 0deg;
      transition: rotate .3s;
    }
  }

  &.up {
    i {
      margin-left: 4px;
      rotate: 180deg;
      transition: rotate .3s;
    }
  }
}

.tip {
  padding: 114px 96px 0;
  color: #fff;
  text-align: left;

  .title {
    font-size: 66px;
    font-weight: 700;
  }

  .cont {
    width: 440px;
    word-wrap: break-word;
    font-size: 20px;
    letter-spacing: 2px;
  }
}

>>>.ant-menu-inline {
  border: 0;
}

.menubox {
  width: 230px;
  height: 888px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: -21px;
}

.goodsContent {
  margin: 20px auto;
  width: $width;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.category-header {
  width: 230px;
  height: 46px;
  line-height: 46px;
  padding-left: 20px;
  border-radius: 10px 10px 0 0;
  background-image: linear-gradient(to left, #58A5FF, #0078FE);
  font-size: 16px;
  color: white;
}


/deep/ .ant-tag {
  background-color: #fff !important;
}

.filhid {
  height: 50px;
  overflow: hidden;
}

.filter-wrapper {
  width: 100%; //$width;
  margin: 0 auto 20px;
  background: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 120, 254, 0.1);
  border-radius: 10px;
}

.sort-wrapper {
  width: 100%; //$width;
  margin: 0 auto;
  padding-left: 20px;
  height: 40px;
  background: #FAFAFA;
  border-radius: 6px;
  border: 1px solid #E2E2E2;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  display: flex;
  align-items: center;

  .sort-left {
    color: #646464;
    width: 100px;
  }

  .sort-right {
    color: #323232;
    margin-right: 40px;
    cursor: pointer;

    &:hover {
      color: $mainColor;
    }

    &.active {
      color: $mainColor;
    }
  }
}

.goods-wrapper {
  margin: 0 auto;
  width: 100%; //$width;
  display: flex;
  flex-wrap: wrap;

  .goods-item {
    height: 240px;
    width: 100%; //$width;
    width: calc((100% - 20px) / 3);
    margin-left: 10px;
    box-shadow: 0 0 10px 0 rgba(#0078FE, 0.1);
    background-color: white;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    justify-content: space-between;

    &:nth-child(3n+1) {
      margin-left: 0;
    }

    .goods-item-content {
      display: flex;
      padding-bottom: 15px;
      margin-bottom: 10px;
      border-bottom: 1px dotted #E2E2E2;

      img {
        width: 80px;
        height: 80px;
      }

      .goods-item-content-right {
        margin-left: 10px;
        width: calc(100% - 80px);
        position: relative;

        .issjrz {
          position: absolute;
          top: -6px;
          right: -6px;

          img {
            height: 24px;
            width: 24px;
          }
        }

        .goods-item-name {
          font-size: 14px;
          cursor: pointer;
          line-height: 14px;
          font-family: PingFangSC-Medium, PingFang SC, sans-serif;
          font-weight: 500;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          color: #323232;
          width: 90%;

          &:hover {
            color: $mainColor;
          }
        }

        .goods-item-supplier {
          font-size: 12px;
          line-height: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          color: $mainColor;
          padding: 5px 10px;
          border-radius: 2px;
          border: 1px solid #CCE4FE;
          width: fit-content;
          max-width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-bottom: 6px;
        }
      }
    }

    .goods-item-content-bottom {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .through {
        text-decoration: line-through;
        color: #999;
        font-size: 12px;
        margin-left: 4px;

      }

      .itemflex {
        white-space: nowrap;
        display: flex;
        align-items: self-end;
      }

      .itemprice {
        font-size: 20px;
        color: #E03437;
        font-weight: 500;

        .unit {
          font-size: 12px;
          font-weight: 400;
          color: #909090;
          margin-left: 6px;
        }
      }

      .goods-item-price {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC, sans-serif;
        font-weight: 500;
        color: #E03437;
        display: flex;
        align-items: flex-end;

        .goods-item-unit {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #909090;
          margin-left: 6px;
        }
      }
    }

    .goods-item-desc {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #646464;
      line-height: 15px;
    }

    .goods-item-bottom {
      display: flex;
      align-items: flex-start;

      .goods-item-type {
        flex: 1;
        width: 0;
        display: flex;
        align-items: flex-start;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #646464;
        line-height: 14px;

        &:last-child {
          margin-left: 5px;
        }

        .goods-item-type-content {
          color: #323232;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

.pagination {
  width: 100%; //$width;
  margin: 20px auto;
  padding-bottom: 20px;
}
</style>
